  <template>
    <a-layout>
      <a-layout-content
          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
      >
        <div class="about">
          <h1>文档管理</h1>
        </div>
        <a-row :gutter="24">
          <a-col :span="8">
            <p>
              <a-form layout="inline" :model="param">
                <a-form-item>
                  <a-button type="primary" @click="handleQuery()">
                    查询
                  </a-button>
                </a-form-item>
                <a-form-item>
                  <a-button type="primary" @click="add()">
                    新增
                  </a-button>
                </a-form-item>
              </a-form>
            </p>
            <a-table
                v-if="level1 && level1.length"
                :columns="columns"
                :row-key="record => record.id"
                :data-source="level1"
                :pagination="false"
                :loading="loading"
                size="small"
                :defaultExpandAllRows="true"
            >

              <!-- 定义两个渲染，第一个是封面图，第二个是按钮 -->
              <template #name="{ text, record }">
                {{record.sort}} {{text}}
              </template>

              <template v-slot:action="{ text, record }">
                <a-space size="small">
                  <a-button type="primary" @click="edit(record)" size="small">
                    编辑
                  </a-button>
                  <a-popconfirm
                      title="删除后不可恢复，确认删除？"
                      ok-text="是"
                      cancel-text="否"
                      @confirm="handleDelete(record.id)"
                  >
                    <a-button type="danger" size="small">
                      删除
                    </a-button>
                  </a-popconfirm>
                </a-space>
              </template>
            </a-table>
          </a-col>
          <a-col :span="16">
            <p>
              <a-form layout="inline" :model="param">
                <a-form-item>
                  <a-button type="primary" @click="handleSave()">
                    保存
                  </a-button>
                </a-form-item>
              </a-form>
            </p>

            <a-form :model="doc" layout="vertical">
              <a-form-item>
                <a-input v-model:value="doc.name" placeholder="名称"/>
              </a-form-item>

              <a-form-item>
                <a-tree-select
                    v-model:value="doc.parent"
                    style="width: 100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="treeSelectData"
                    placeholder="请选择父文档"
                    tree-default-expand-all
                    :replaceFields="{title: 'name', key: 'id', value: 'id'}"
                >
                </a-tree-select>
              </a-form-item>
              <a-form-item>
                <a-input v-model:value="doc.sort" placeholder="顺序"/>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="handlePreviewContent()">
                  <EyeOutlined /> 内容预览
                </a-button>
              </a-form-item>
              <a-form-item>
                <div id="content"></div>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>

        <a-drawer width="900" placement="right" :closable="false" :visible="drawerVisible" @close="onDrawerClose">
          <div class="wangeditor" :innerHTML="previewHtml"></div>
        </a-drawer>

      </a-layout-content>
    </a-layout>

<!--    <a-modal-->
<!--        title="文档表单"-->
<!--        v-model:visible="modalVisible"-->
<!--        :confirm-loading="modalLoading"-->
<!--        @ok="handleSave"-->
<!--    >-->
<!--      -->
<!--    </a-modal>-->
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref, createVNode} from 'vue';
  import axios from 'axios';
  import {message, Modal} from 'ant-design-vue'
  import {Tool} from "@/util/tool";
  import {useRoute} from "vue-router";
  import ExclamationCircleOutlined from "@ant-design/icons-vue";
  import E from 'wangeditor'

  export default defineComponent({
    name: 'AdminDoc',
    setup() {
      const route = useRoute();
      console.log("路由：", route);
      console.log("route.path: ", route.path);
      console.log("route.query: ", route.query);
      console.log("route.param: ", route.params);
      console.log("route.fullPath: ", route.fullPath);
      console.log("route.name: ", route.name);
      console.log("route.meta: ", route.meta);
      const param = ref();
      param.value = {}
      const docs = ref();
      const loading = ref(false);

      const columns = [
        {
          title: '名称',
          dataIndex: 'name',
          slots: { customRender: 'name' }
        },
        {
          title: 'Action',
          key: 'action',
          slots: { customRender: 'action'}
        }
      ];

      /**
       * 一级文档树，children属性就是二级文档
       * [{
       *   id: "",
       *   name: "",
       *   children: [{
       *     id: "",
       *     name: "",
       *   }]
       * }]
       */
      const level1 = ref(); // 一级文档数，children属性就是二级文档
      level1.value = [];

      // 因为树选择组件的属性状态，会随当前编辑的节点而变化，所以单独生命一个响应式变量
      const treeSelectData = ref();
      treeSelectData.value = [];

      /**
       * 数据查询
       */
      const handleQuery = () => {
        loading.value = true;
        // 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，不会显示修改后的数据
        level1.value = [];
        // 通过axios去调用后端的接口
        axios.get("/doc/all/" + route.query.ebookId).then((response) => {
          loading.value = false;
          const data = response.data;
          if (data.success) {
            docs.value = data.content;
            console.log("原始数组：", docs.value);

            level1.value = [];
            level1.value = Tool.array2Tree(docs.value, 0);
            console.log("树形结构：", level1);

            // 加上 或 判断，避免空指针异常，导致下一句unshift报错，前端不能正常选择“无”这个选项
            treeSelectData.value = Tool.copy(level1.value) || [];

            // 为选择树添加一个“无”
            treeSelectData.value.unshift({id: 0, name: '无'});
          } else {
            message.error(data.message)
          }

        });
      };


      /**
       * 表单
       */
      // 定义一个响应式变量doc
      const doc = ref();
      doc.value = {};
      doc.value = {
        ebookId: route.query.ebookId
      };
      const modalVisible = ref(false);
      const modalLoading = ref(false);
      const editor = new E('#content');
      editor.config.zIndex = 0;   // 覆盖层级大小（默认是500）


      const handleSave = () => {
        modalLoading.value = true;
        // 获得富文本内容
        doc.value.content = editor.txt.html();

        // 调用后端接口执行保存操作
        axios.post("/doc/save", doc.value).then((response) => {
          modalLoading.value = false;
          const data = response.data;   // data = CommonResp
          if (data.success) {
            //modalVisible.value = false;
            message.success("保存成功！");

            // 重新加载列表
            handleQuery();
          } else {
            message.error(data.message);
          }
        });
      };

      /**
       * 将某节点及其子孙节点全部置为disabled
       */
      const setDisable = (treeSelectData: any, id: any) => {
        // 遍历数组，即遍历某一层节点
        for (let i = 0; i < treeSelectData.length; i++) {
          const node = treeSelectData[i];
          if (node.id === id) {
            // 如果当前节点就是目标节点
            console.log("disabled", node);
            // 将目标节点设置为disabled
            node.disabled = true;

            // 遍历所有子节点，将所有子节点全都加上disabled
            const children = node.children;
            if (Tool.isNotEmpty(children)) {
              for (let j = 0; j < children.length; j++) {
                setDisable(children, children[j].id);
              }
            }
          } else {
            // 如果当前节点不是目标节点，则到其子节点找找看
            const children = node.children;
            if (Tool.isNotEmpty(children)) {
              setDisable(children, id);
            }
          }
        }
      }

      /**
       * 文档内容查询
       */
      const handleQueryContent = () => {
        // 通过axios去调用后端的接口
        console.log("doc.value.id = ", doc.value.id)
        axios.get("/doc/find-content/" + doc.value.id).then((response) => {
          const data = response.data;
          if (data.success) {
            editor.txt.html(data.content);
          } else {
            message.error(data.message)
          }
        });
      };

      /**
       * 编辑
       */
      const edit = (record: any) => {
        // 编辑时把之前遗留的内容清空
        editor.txt.html("");
        modalVisible.value = true;
        doc.value = Tool.copy(record);
        handleQueryContent();

        // 不能选择当前节点及其所有子孙节点，作为父节点，这样会使树断开，不能在前端页面显示
        treeSelectData.value = Tool.copy(level1.value);
        setDisable(treeSelectData.value, record.id);

        // 为选择树添加一个“无”
        treeSelectData.value.unshift({id: 0, name: '无'});
      };

      /**
       * 新增
       */
      const add = () => {
        // 编辑时把之前遗留的内容清空
        editor.txt.html("");
        modalVisible.value = true;

        doc.value = {
          ebookId: route.query.ebookId
        };

        // 加上 或 判断，避免空指针异常，导致下一句unshift报错，前端不能正常选择“无”这个选项
        treeSelectData.value = Tool.copy(level1.value) || [];

        // 为选择树添加一个“无”
        treeSelectData.value.unshift({id: 0, name: '无'});
      };

      const deleteIds: Array<string> = [];
      const deleteNames: Array<string> = [];

      /**
       * 删除某个文档时，递归找出该文档下的所有子文档id，一起删除
       */
      const getDeleteIds = (treeSelectData: any, id: any) => {
        // 遍历数组，即遍历某一层节点
        for (let i = 0; i < treeSelectData.length; i++) {
          const node = treeSelectData[i];
          if (node.id === id) {
            // 如果当前节点就是目标节点
            deleteIds.push(id);
            deleteNames.push(node.name);

            const children = node.children;
            if (Tool.isNotEmpty(children)) {
              for (let j = 0; j < children.length; j++) {
                getDeleteIds(children, children[j].id);
              }
            }
          } else {
            // 如果当前节点不是目标节点，则到其子节点找找看
            const children = node.children;
            if (Tool.isNotEmpty(children)) {
              getDeleteIds(children, id);
            }
          }
        }
      }


      /**
       * 删除文档
       */
      const handleDelete = (id: number) => {
        //console.log(level1.value, id)
        deleteIds.length = 0;
        deleteNames.length = 0;
        getDeleteIds(level1.value, id);

        Modal.confirm({
          title: '重要提醒',
          icon: createVNode(ExclamationCircleOutlined),
          content: '将删除：【' + deleteNames.join("，") + "】删除后不可恢复，确认删除？",
          onOk() {
            // console.log(ids)
            axios.delete("/doc/delete/" + deleteIds.join(",")).then((response) => {
              const data = response.data; // data = commonResp
              if (data.success) {
                // 重新加载列表
                handleQuery();
              } else {
                message.error(data.message);
              }
            });
          },
        });
      };

      /**
       * 富文本预览
       */
       const drawerVisible = ref(false);
       const previewHtml = ref();
       const handlePreviewContent = () => {
         const html = editor.txt.html();
         previewHtml.value = html;
         drawerVisible.value = true;
       };

       const onDrawerClose = () => {
         drawerVisible.value = false;
       }

      /**
       * 初始的时候，先查询一次
       * 其中page和size要和后端接受的参数名称对应
       */
      onMounted(() => {
        handleQuery();
        editor.create();
      });

      return {
        param,
        //docs,
        level1,
        columns,
        loading,

        edit,
        add,
        handleDelete,

        handleQuery,

        doc,
        modalVisible,
        modalLoading,
        handleSave,
        treeSelectData,
        drawerVisible,
        previewHtml,
        handlePreviewContent,
        onDrawerClose,
      }
    }
  });
</script>